<template>
  <div class="management-container">
    <h1>活动管理</h1>
    
    <!-- 添加按钮 -->
    <div class="management-actions">
      <button @click="createActivity">新增活动</button>
    </div>

    <!-- 显示活动列表 -->
    <table class="activities-table" v-if="activities.length > 0">
      <thead>
        <tr>
          <th>Title</th>
          <th>Date</th>
          <th>Location</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="activity in activities" :key="activity.id">
          <td>{{ activity.title }}</td>
          <td>{{ activity.date }}</td>
          <td>{{ activity.location }}</td>
          <td>
            <button @click="editActivity(activity)">编辑</button>
            <button @click="deleteActivity(activity.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <p v-else>暂无活动数据</p>

    <!-- 模态框 -->
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <h2>{{ isEditing ? '编辑活动' : '新增活动' }}</h2>
        <form @submit.prevent="saveActivity">
          <div class="form-group">
            <label>Title:</label>
            <input type="text" v-model="currentActivity.title" required />
          </div>
          <div class="form-group">
            <label>Description:</label>
            <textarea v-model="currentActivity.description" required></textarea>
          </div>
          <div class="form-group">
            <label>Date:</label>
            <input type="date" v-model="currentActivity.date" required />
          </div>
          <div class="form-group">
            <label>Location:</label>
            <input type="text" v-model="currentActivity.location" required />
          </div>
          <div class="modal-actions">
            <button type="submit">保存</button>
            <button @click="closeModal">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import defaultActivities from '@/data/activities.js';

export default {
  data() {
    const storedActivities = localStorage.getItem('activities');
    let activities = [];

    if (storedActivities) {
      try {
        activities = JSON.parse(storedActivities);
      } catch (e) {
        // 解析失败时使用默认数据
        activities = [...defaultActivities];
      }
    } else {
      activities = [...defaultActivities]; // 如果localStorage不存在，则使用默认值
    }

    return {
      activities,
      showModal: false,
      isEditing: false,
      currentActivity: {
        id: null,
        title: '',
        description: '',
        date: '',
        location: ''
      }
    };
  },
  methods: {
    createActivity() {
      this.isEditing = false;
      this.currentActivity = {
        id: null,
        title: '',
        description: '',
        date: '',
        location: ''
      };
      this.showModal = true;
    },
    editActivity(activity) {
      this.isEditing = true;
      this.currentActivity = { ...activity };
      this.showModal = true;
    },
    saveActivity() {
      if (this.isEditing) {
        const index = this.activities.findIndex(a => a.id === this.currentActivity.id);
        if (index !== -1) {
          this.activities.splice(index, 1, this.currentActivity);
        }
      } else {
        const newId = this.activities.length > 0 ? Math.max(...this.activities.map(a => a.id)) + 1 : 1;
        this.currentActivity.id = newId;
        this.activities.push({ ...this.currentActivity });
      }

      localStorage.setItem('activities', JSON.stringify(this.activities));
      this.closeModal();
    },
    deleteActivity(id) {
      const index = this.activities.findIndex(a => a.id === id);
      if (index !== -1) {
        this.activities.splice(index, 1);
        localStorage.setItem('activities', JSON.stringify(this.activities));
      }
    },
    closeModal() {
      this.showModal = false;
    }
  }
};
</script>

<style scoped>
.management-container {
  max-width: 1000px;
  margin: 2em auto;
  padding: 2em;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.management-actions {
  margin-bottom: 1em;
}

.management-actions button {
  padding: 0.5em 1em;
  background-color: #2ecc71;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.management-actions button:hover {
  background-color: #27ae60;
}

.activities-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

.activities-table th, .activities-table td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.activities-table th {
  background-color: #f2f2f2;
}

.activities-table tr:hover {
  background-color: #f5f5f5;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  background-color: white;
  padding: 2em;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
}

.modal-content h2 {
  margin-top: 0;
}

.form-group {
  margin-bottom: 1em;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1em;
}

.modal-actions button {
  padding: 0.5em 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-actions button:nth-child(1) {
  background-color: #3498db;
  color: white;
}

.modal-actions button:nth-child(2) {
  background-color: #e74c3c;
  color: white;
}
</style>